import React, { FC, useEffect, useState } from 'react';
import { connect, ConnectProps, history, DjModelState, request } from 'umi';
import styles from './default.less';
import {
  Row,
  Col,
  Typography,
  PageHeader,
  Spin,
  List,
  Avatar,
  Button,
} from 'antd';
import { RightOutlined } from '@ant-design/icons';
const { Link, Text } = Typography;
interface PageProps extends ConnectProps {
  djModel: DjModelState;
  dispatch: any;
}

const Default: FC<PageProps> = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [recommend, setRecommend] = useState([]);
  let getRecommendDefault = () => {
    setLoading(true);
    request(`/dj/category/recommend`).then(res => {
      setRecommend(res.data);
      setLoading(false);
    });
  };

  let more = (id: string) => {
    history.push({
      pathname: '/dj',
      query: {
        id: id,
      },
    });
  };

  useEffect(() => {
    getRecommendDefault();
  }, []);

  return (
    <div>
      <Spin spinning={loading}>
        {recommend.map((data: any, index: number) => (
          <div key={index}>
            <PageHeader
              className={styles.site_page_header}
              backIcon={false}
              title={data.categoryName}
              extra={[
                <Button
                  type="link"
                  onClick={() => {
                    more(data.categoryId);
                  }}
                  key="0"
                >
                  更多
                  <RightOutlined />
                </Button>,
              ]}
            />

            <Row gutter={16}>
              {data.radios.map((item: any, indexItem: number) => (
                <Col className="gutter-row" span={8} key={indexItem}>
                  <List itemLayout="horizontal">
                    <List.Item>
                      <List.Item.Meta
                        avatar={
                          <Avatar src={item.picUrl} shape="square" size={64} />
                        }
                        title={item.name}
                        description={item.rcmdText}
                      />
                    </List.Item>
                  </List>
                </Col>
              ))}
            </Row>
          </div>
        ))}
      </Spin>
    </div>
  );
};

export default connect(({ djModel }: { djModel: DjModelState }) => ({
  djModel,
}))(Default);
